<template>
  <div class="home-container">
    <topnav></topnav>
    <img src="../../assets/images/topImg.png" alt="" class="topImg" />
    <el-row :gutter="20" type="flex" justify="center" class="search-box">
      <el-col :span="4">
        <img src="../../assets/images/logo.png" alt="" />
      </el-col>
      <el-col :span="11">
        <el-input placeholder="请输入内容" clearable class="search-input" v-model="query">
          <el-button slot="append" class="search-btn">搜索</el-button>
        </el-input>
        <ul class="link-list">
          <li><a href="#">一淘现时抢购</a></li>
          <li><a href="#">手机</a></li>
          <li><a href="#">零食</a></li>
          <li><a href="#">剃须刀</a></li>
          <li><a href="#">卫衣男</a></li>
          <li><a href="#">沙发</a></li>
          <li><a href="#">女秋装</a></li>
          <li><a href="#">女裤</a></li>
          <li><a href="#">运动鞋女</a></li>
          <li><a href="#">彪马</a></li>
        </ul>
      </el-col>
    </el-row>
    <div class="header-nav">
      <ul class="nav-list">
        <li><a href="#">每日爆品1元起</a></li>
        <li><a href="#">聚划算</a></li>
        <li><a href="#">淘抢购</a></li>
        <li><a href="#">天猫超市</a></li>
      </ul>
    </div>
    <div class="main-container">
      <div class="main-top">
        <div class="main-left" @mouseleave.prevent="handleLeave" ref="mainLeft">
          <div
            :class="
              activeId == index
                ? 'active channel-container '
                : 'channel-container'
            "
            v-for="(item, index) in items"
            :key="index"
            @mouseover="handleOver(index)"
          >
            <div class="channel-left">
              <i :class="'iconfont '+item.icon"></i>
              <div class="category">{{ item.category }}</div>
            </div>
            <div class="channel-right">
              <a href="#" v-for="idex in item.channel_simple" :key="idex.id">{{
                idex
              }}</a>
            </div>
          </div>
          <div
            class="channel-right-box"
            v-if="isRight"
            @mouseleave.prevent="handleLeave"
            :style="{height: scrollerHeight}"
          >
            <div class="right-item" v-for="item in rightBox" :key="item.id">
              <div class="right-item-title">{{ item.main }}</div>
              <ul class="right-item-box">
                <li v-for="idx in item.goods" :key="idx.id">{{ idx }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="main-mid">
          <div class="main-mid-left">
            <el-carousel height="280px" class="top-item">
              <el-carousel-item v-for="(item, index) in banners" :key="index">
                <img :src="item" alt="" />
              </el-carousel-item>
            </el-carousel>
            <div class="small-title">
              <span>超值活动专区</span>
              <span>每天10点更新</span>
            </div>
            <div class="img-box">
              <img src="../../assets/images/midItem1.jpg" alt="" />
              <img src="../../assets/images/midItem2.jpg" alt="" />
            </div>
          </div>
          <div class="main-mid-right">
            <img
              src="../../assets/images/midItem3.jpg"
              alt=""
              class="top-item"
            />
            <img src="../../assets/images/midItem4.jpg" alt="" />
          </div>
        </div>

        <div class="main-right">
          <span class="right-first">我的淘宝</span>
          <ul class="item-box">
            <li><img src="../../assets/images/taobao.gif" alt=""></li>
            <li><img src="../../assets/images/taobao.gif" alt=""></li>
            <li><img src="../../assets/images/taobao.gif" alt=""></li>
            <li><img src="../../assets/images/taobao.gif" alt=""></li>
            <li><img src="../../assets/images/taobao.gif" alt=""></li>
            <li><img src="../../assets/images/taobao.gif" alt=""></li>
            <li><img src="../../assets/images/taobao.gif" alt=""></li>
            <li><img src="../../assets/images/taobao.gif" alt=""></li>
          </ul>
          <ul class="message-box">
            <li class="item" v-for="(item, index) in messageList" :key="index">
              <span :class="`item-type-${item.tagType} item-tag`">{{
                item.tagName
              }}</span>
              <span class="item-info">{{ item.tagContent }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="main-bottom">
        <div class="bottom-title">猜你喜欢</div>
        <ul class="main-bottom-container">
          <li
            class="bottom-item"
            v-for="(item,index) in goodsList"
            :key="index"
            @click="gotoDetail(item.goodId)"
          >
            <img :src="`http://127.0.0.1:3007/${item.picName}`" alt="" />
            <div class="goods-title">
              {{ item.goodName+item.keyWord }}
            </div>
            <div class="price-box">
              <span>￥</span>
              <span>{{ item.priceNow }}</span>
              <span class="pass">￥{{ item.priceAgo }}</span>
            </div>
            <div class="shopInfo">
              <i class="iconfont icon-dianpu"></i>
              {{ item.shopName }}
              <i class="iconfont shopcart" @click="handleAddCart(item.goodId,item.shopId)">&#xe63f;</i>
            </div>
            <div class="item-footer">月销{{ item.saleCount }}</div>
          </li>
        </ul>
        <el-pagination v-if="total > 5" background layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="main-footer">
      <div class="footer-item">
        <span class="item-link">联系客服</span>
        <span class="item-link">开放平台</span>
        <span class="item-link">法律声明</span>
        <span class="item-link">廉正举报</span>
        <span>Taobao.com版权所有 2003-现在</span>
        <span class="item-link">增值电信业务经营许可证：浙B2-20070195</span>
        <span class="item-link">浙公网安备 33010002000075号</span>
      </div>
      <ul class="footer-item footer-item-2">
        <li class="item-link">阿里巴巴集团</li>
        <li class="item-link">淘宝网</li>
        <li class="item-link">天猫</li>
        <li class="item-link">聚划算</li>
        <li class="item-link">全球速卖通</li>
        <li class="item-link">阿里巴巴国际交易市场</li>
        <li class="item-link">1688</li>
        <li class="item-link">阿里妈妈</li>
        <li class="item-link">飞猪</li>
        <li class="item-link">阿里云计算</li>
        <li class="item-link">AIOS</li>
        <li class="item-link">阿里通信</li>
        <li class="item-link">高德</li>
        <li class="item-link">UC</li>
        <li class="item-link">友盟</li>
        <li class="item-link">虾米</li>
        <li class="item-link">阿里星球</li>
        <li class="item-link">钉钉</li>
        <li class="item-link">支付宝</li>
        <li class="item-link">达摩院</li>
      </ul>
    </div>
  </div>
</template>
<script>
import topnav from '@/components/topnav.vue'
export default {
  components: {
    topnav
  },
  data () {
    return {
      isRight: false,
      items: [],
      rightBox: [],
      activeId: null,
      banners: [
        require('../../assets/images/banner1.jpg'),
        require('../../assets/images/banner2.jpg'),
        require('../../assets/images/banner3.jpg')
      ],
      messageList: [
      ],
      total: 5,
      goodsList: [
      ],
      query: '',
      queryInfo: {
        page: 1,
        limit: 10
      },
      showmenu: false
    }
  },
  created () {
    this.getChannel()
    this.getGoodsList()
    this.getMessage()
  },
  computed: {
    scrollerHeight () {
      return this.$refs.mainLeft.offsetHeight
    }
  },
  mounted () {

    // this.userinfo = JSON.parse(sessionStorage.getItem('userinfo'))
  },
  methods: {
    handleOver (id) {
      this.activeId = id
      this.isRight = true
      this.rightBox = this.items[id].channem_detail
    },
    handleLeave () {
      this.activeId = null
      this.isRight = false
    },
    async getChannel () {
      const { data: res } = await this.$http.get('/shop/getChannel')
      if (res.code !== 200) return this.$message.error(res.msg)
      this.items = res.data
    },
    async getGoodsList () {
      const { data: res } = await this.$http.post('/shop/getGoods', this.queryInfo)
      if (res.code !== 200) return this.$message.error(res.msg)
      this.goodsList = res.data
    },
    async getMessage () {
      const { data: res } = await this.$http.get('/shop/getActivity')
      if (res.code !== 200) return this.$message.error(res.msg)
      this.messageList = res.data
    },
    async handleAddCart (goodId, shopId) {
      console.log(goodId, shopId, this.userinfo.id)
      const { data: res } = await this.$http.post('/cart/addCartItem', {
        userId: this.userinfo.id,
        goodId: goodId,
        shopId: shopId
      })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.$message.success('添加购物车成功！')
    },
    gotoDetail (id) {
      this.$router.push('/goodDetail')
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../assets/css/shopIndex.css";
</style>
<style>
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #fd3f31 !important;
  color: #fff;
}
</style>
